<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品多规格设置</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .infinitus_cont *{ box-sizing: border-box;}
        .infinitus_cont input{ outline: none;}
        .infinitus_cont{ width: 100%; padding: 12px 15px; background:#FFF; border-radius:10px; position: relative;}
        .inf_classify_item{ padding-bottom: 10px;}
        .inf_body{ display: flex; line-height: 30px; color: #FFF; font-size: 16px; justify-content: space-between; padding: 8px 15px; border-radius: 5px; background-color: #909399;}
        .inf_btn_group{ display: flex; justify-content: space-between;}
        .inf_btn{ display: inline-block; line-height: 35px; background-color: #409EFF; color: #FFF; border-radius: 4px; font-size: 14px; padding: 0 20px; cursor: pointer;}
        .inf_child{ padding-left: 5%; padding-top: 10px;}

        .spec_box{ padding: 5px 12px; border: 1px solid #DDD; margin-top: 20px;}
        .spec_name{ height: 35px; margin: 10px 0;}
        .spec_box input{ float: left; width: 160px; height: 35px; line-height: 35px; border: 1px solid #CCC; padding-left: 9px; vertical-align: top;}
        .spec_box .inf_btn{ float: left; margin-left: -6px; border-radius: 0; vertical-align: top;}
        .spec_close{ float: left; width: 40px; line-height: 33px; text-align: center; font-size: 22px; font-weight: bold; color: #00C0EF; border: 1px solid #CCC; border-left: 0; vertical-align: top; cursor: pointer; border-radius: 0 4px 4px 0;}
        .spec_close.red_bg{ border-color: transparent; background-color: #E4393C; color: #FFF;}

        .spec_item_cont{ margin: 12px 0;}
        .spec_item{ display: inline-block; height: 35px; margin-right: 15px;}

        .inf_select{ margin: 20px 0;}
        .inf_select .sel_item{ margin-top: 15px;}
        .inf_select .sel_cas{ width: 600px;}
        .inf_select .einp{ width: 140px;}
        
        /* .el-cascader-menu__wrap{ height:364px;} */
    </style>
</head>
<body>
    <div class="infinitus_cont" v-loading.fullscreen="loading" element-loading-text="正在提交..." id="infinitus_body">
        <div class="inf_spec">
            <div class="inf_btn" @click="addSpec">添加规格</div>
            <el-button type="info" size="medium" @click="history.back()">返回</el-button>
            <div class="spec_box" v-for="(item, index) in attrs">
                <div class="spec_name">
                    <input type="text" v-model="item.name" placeholder="规格名称(例如：颜色)" />
                    <div class="inf_btn" @click="addItem(index)">添加规格项</div>
                    <div class="spec_close red_bg" @click="deleteSpec(index)">×</div>
                </div>
                <div class="spec_item_cont">
                    <div class="spec_item" v-for="(val, key) in item.values">
                        <input type="text" v-model="val.name" />
                        <div class="spec_close" @click="deleteItem(index, key)">×</div>
                    </div>
                </div>
            </div>
        </div>

        <!---->
        <div class="inf_select">
            <div class="inf_btn" @click="addScores">新增一项</div>
            <div class="select_cont">
                <div class="sel_item" v-for="(item, index) in scoreList">
                    <el-input class="sel_cas" v-model="item.title" disabled v-if="item.title"></el-input>
                    <el-cascader class="sel_cas" :props="cascader" @change="selectChange($event, index)" v-else></el-cascader>
                    <el-input class="einp" v-model="item.value" placeholder="请设置该项积分" v-show="item.value != null"></el-input>
                    <el-button type="danger" icon="el-icon-delete" v-if="item.title" @click="deleteScore(index)"></el-button>
                </div>
            </div>
        </div>

        <div class="inf_btn" style="margin: 20px 0;" @click="submit">保存</div>
    </div>

<script src="http://cache.weikuw.com/tpl/static/lib/js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var multiformat = new Vue({
        el: '#infinitus_body',
        data(){
            return {
                attrs: [
                    { id: 0, name: '类型', values: [ { id: 1, name: '单门'}, { id: 2, name: '双门'}]},
                    { id: 3, name: '容量', values: [ { id: 4, name: '50L'}, { id: 5, name: '100L'}]},
                    { id: 6, name: '制冷', values: [ { id: 7, name: '效果差'}, { id: 8, name: '正常'}, { id: 9, name: '无法启动'}]},
                    // { id: 10, name: '外观', values: [ { id: 11, name: '外观完好'}, { id: 12, name: '破碎/掉漆'}]}
                ],
				loading: false,
                seq: 13,
                scoreList: [],	//{ label: '2_5_9', title: '双门 / 100L / 无法启动 / ----', value: 30}
                score_str: { '-1': '----'},
                cascader: {
                    lazy: true,
                    lazyLoad: (node, res) => {
                        var { level } = node,
                            nodes = this.attrs[level].values.map(item => {
                                this.score_str[item.id] = item.name;
                                return {
                                    value: item.id,
                                    label: item.name,
                                    leaf: level >= this.attrs.length - 1
                                }
                            });
                        // console.log(level + ': ', nodes, node);
                        if(level > 0){
                            nodes.push({
                                value: -1,
                                label: '----',
                                leaf: true
                            })
                        }
                        res(nodes);
                    }
                }
            }
        },
        created(){
			// let sku_info = {};
			// this.attrs = sku_info.attrs || [];
			// this.scoreList = sku_info.scoreList || [];
			// this.seq = sku_info.seq || 0;
			console.log('Multiformat Start:', this);

            var data = [],
                sku = [
                    ['A', 'B', 'C'],
                    [1, 2, 3],
                    ['I', 'II', 'III']
                ];
            
            function cartesian(arr) {
                if (arr.length < 2) return arr[0] || [];
                return [].reduce.call(arr, function (col, set) {
                    let res = [];
                    col.forEach(c => {
                        set.forEach(s => {
                            let t = [].concat(Array.isArray(c) ? c : [c]);
                            t.push(s);
                            res.push(t);
                        })
                    });
                    console.log('res:', res);
                    return res;
                });
            }
            data = cartesian(sku);
            console.log('cartesian:', data);
            sku.reduce(function(col, set){
                console.log('reduce:', col, set);
                // return false;
            })
		},
        methods: {
            addSpec(){
                this.attrs.push({
                    id: this.seq++,
                    name: '',
                    values: []
                });
            },
            deleteSpec(idx){
                this.attrs.splice(idx, 1);
            },
            addItem(index){
                this.attrs[index].values.push({
                    id: this.seq++,
                    name: ''
                });
            },  
            deleteItem(idx, key){
                this.attrs[idx].values.splice(key, 1);
            },
            addScores(){
                this.scoreList.unshift({
                    label: '',
                    value: null
                })
            },
            deleteScore(idx){
                this.scoreList.splice(idx, 1);
            },
            selectChange(res, idx){
                console.log('change:', res);
                let item = this.scoreList[idx],
                    ids = Object.assign([], res);
                if(ids.indexOf(-1) != -1) ids.splice(-1, 1);
                item.value = "";
                item.str = this.getTitle(res);
                item.label = ids.join('_');
				//console.log('item:', item);
            },
            getTitle(list){
                let title = [];
                list.map(item => {
                    title.push(this.score_str[item]);
                });
                return title.join(' / ');
            },
            submit(){
                let _this = this,
					sku_info = {
						attrs: this.attrs,
						scoreList: this.scoreList,
						param: {},
						seq: this.seq
					};
                this.scoreList.map(item => {
					if(!item.title){
						item.title = item.str;
						delete item.str;
					}
                    sku_info.param[item.label] = item.value;
					//console.log('item:', item);
                })
                console.log('sku_info:', sku_info); //return false;
				this.loading = true;
				$.post("{:url('sku', ['goods_cate_id' => input('goods_cate_id')])}", { sku_info: JSON.stringify(sku_info)}, function(res){
					console.log('sku:', res);
					_this.loading = false;
					if(res.status != 0){
						_this.$alert(res.msg);
						return false;
					}
					_this.$message({
						type: 'success',
						message: res.msg,
						onClose(res){
							location.reload();
						}
					});
				}, 'json');
            }
        }
    });
</script>
</body>
</html>